<div
  class="po-widget-container"
  [class.po-clickable]="click.observers.length"
  [class.po-widget]="!primary"
  [class.po-widget-disabled]="disabled"
  [class.po-widget-primary]="primary"
  [class.po-widget-no-shadow]="click.observers.length && noShadow"
  [style.background-image]="background ? 'url(' + background + ')' : undefined"
  (click)="onClick($event)"
  (keydown)="onKeyDown($event)"
  [tabindex]="disabled || !click.observers.length ? -1 : 0"
>
  @if (hasTitleHelpOrSetting()) {
    <div class="po-widget-header">
      <div class="po-widget-wrapper-info">
        <div #wrapperInfo class="po-widget-wrapper-tag">
          @if (showTitleAction) {
            <span
              #wrapperTitle
              class="po-widget-title-action po-widget-text"
              (click)="runTitleAction($event)"
              [p-tooltip]="title && showTooltip() ? title : ''"
            >
              {{ title }}
            </span>
          } @else {
            <p #wrapperTitle class="po-widget-text" [p-tooltip]="title && showTooltip() ? title : ''">
              {{ title }}
            </p>
          }
          @if (tagLabel) {
            <po-tag
              #tagElement
              [p-value]="tagLabel"
              [p-icon]="tagIcon"
              [p-type]="disabled ? null : tagType ? tagType : 'success'"
              [p-color]="disabled ? '#ECECEE' : null"
              [p-text-color]="disabled ? '#36364A' : null"
              p-force-icon
            >
            </po-tag>
          }
        </div>
        @if (actions?.length) {
          <div
            class="po-widget-button-wrapper"
            #popupTarget
            (click)="togglePopup(popupTarget, $event)"
            (keydown)="$event.stopPropagation()"
          >
            <po-button
              #buttonPopUp
              [p-size]="size"
              p-icon="an-fill an-dots-three-outline-vertical"
              [p-disabled]="disabled"
              p-kind="tertiary"
            >
            </po-button>
          </div>
        }
      </div>
    </div>
  }

  <po-container p-no-border [p-height]="containerHeight">
    <div #contentContainer class="po-widget-body">
      <ng-content #refContent></ng-content>
    </div>
    @if (!hasContent && height) {
      <span class="po-header-content-fallback">.</span>
    }
  </po-container>

  @if (primaryLabel) {
    <div class="po-widget-footer">
      @if (!secondaryLabel) {
        <div class="po-widget-actions" (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
          <po-button
            class="po-widget-actions"
            id="primaryAct-{{ id }}"
            [p-label]="primaryLabel"
            (p-click)="runPrimaryAction()"
            [p-danger]="dangerPrimaryAction"
            [p-kind]="primary ? 'primary' : kindPrimaryAction || 'tertiary'"
            [p-disabled]="disabled"
            [p-size]="size"
          ></po-button>
        </div>
      }
      @if (secondaryLabel) {
        <div class="po-widget-actions" (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
          <po-button
            class="po-widget-actions"
            id="primaryAct-{{ id }}"
            [p-label]="primaryLabel"
            (p-click)="runPrimaryAction()"
            [p-danger]="dangerPrimaryAction"
            [p-kind]="primary ? 'primary' : kindPrimaryAction || 'tertiary'"
            [p-disabled]="disabled"
            [p-size]="size"
          ></po-button>
        </div>
      }
      @if (secondaryLabel) {
        <div class="po-widget-actions" (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
          <po-button
            class="po-widget-actions"
            id="secondaryAct-{{ id }}"
            [p-label]="secondaryLabel"
            (p-click)="runSecondaryAction()"
            [p-danger]="dangerSecondaryAction"
            [p-kind]="primary ? 'primary' : kindSecondaryAction || 'tertiary'"
            [p-disabled]="disabled"
            [p-size]="size"
          ></po-button>
        </div>
      }
    </div>
  }
</div>

<po-popup #popup [p-actions]="actions" [p-size]="size" [p-target]="popupTarget" (p-close)="closePopUp()"> </po-popup>
